<script setup>
import { getPageProducts } from '@/api/ShopDatabase/index.js'
import { getPageCourse } from "@/api/EngageManagement/cureManagement.js";
import { getPageCombo } from '@/api/ShopDatabase/package';
import { getProjectList } from '@/api/ShopDatabase/project.js';

import { useDistInfoStore } from '@/stores/dict.js';
import { uniqueFunc } from '@/utils/common.js'
import { getBaseSetting } from '@/api/ShopDatabase/goodsSetting.js';
import { getFieldValue } from '@/utils/common.js'
const emits = defineEmits(["backRangeValue"]);
const distInfoStore = useDistInfoStore();
const groupType = ref("疗程");
const businessBrandIdInfo = ref("");
const props = defineProps({
    groupTypeList: {
        type: Array,
        default: () => ['疗程','套餐','项目','产品']
    },
})
const formInline = ref([

])
watch(groupType,()=>{
    if(groupType.value == "疗程"){
        formInline.value = [
            {
                type: "input",
                prop: "fuzzyValue",
                placeholder: "编号/品名/助记码/条码",
                label: "",
                model: "",
            },
        ]
    }else{
        formInline.value = [
            {
                type: "input",
                prop: "fuzzyValue",
                placeholder: "编号/品名/助记码/条码",
                label: "",
                model: "",
            },
            {
                type: "select",
                placeholder: "销售分类",
                filterable:true,
                label: '',
                prop: 'salesClassIdList',
                data:[
                ],
                multiple:true,
                model: [],
            },
        ]
    }
},{
    immediate:true,
})
const btnLefts = ref([]);
const btnRights = ref([])
const tableConfig = ref([
])
const tableLoading = ref(false)
const totalPage = ref(0)
const tableData = ref([]);
const rangeFlag = ref(false);
const checkDataCure = ref([]);
const checkDataCombo = ref([]);
const checkDataProject = ref([]);
const checkDataProduct = ref([]);
const seachTable = ref(null);

const selectHandle = (val,row)=>{
  if(groupType.value == "疗程"){
    let index = checkDataCure.value.map(value=>value.id).indexOf(row.id);
    if(index >=0){
        removeData([row.id]);
    }else{
        checkDataCure.value = uniqueFunc([...checkDataCure.value,row],'id');
    }
  }else if(groupType.value == "套餐"){
    let index = checkDataCombo.value.map(value=>value.id).indexOf(row.id);
    if(index >=0){
        removeData([row.id]);
    }else{
        checkDataCombo.value = uniqueFunc([...checkDataCombo.value,row],'id');
    }
  }else if(groupType.value == "项目"){
    let index = checkDataProject.value.map(value=>value.id).indexOf(row.id);
    if(index >=0){
        removeData([row.id]);
    }else{
        checkDataProject.value = uniqueFunc([...checkDataProject.value,row],'id');
    }
  }else if(groupType.value == "产品"){
    let index = checkDataProduct.value.map(value=>value.id).indexOf(row.id);
    if(index >=0){
        removeData([row.id]);
    }else{
        checkDataProduct.value = uniqueFunc([...checkDataProduct.value,row],'id');
    }
  }


}
const selectAllChange = (col)=>{
    if(groupType.value == "疗程"){
        if(col.length>0){
            checkDataCure.value = uniqueFunc([...checkDataCure.value,...col],'id');
        }else{
            let ids = tableData.value.map(value=>value.id);
            removeData(ids);
        }
    }else if(groupType.value == "套餐"){
        if(col.length>0){
            checkDataCombo.value = uniqueFunc([...checkDataCombo.value,...col],'id');
        }else{
            let ids = tableData.value.map(value=>value.id);
            removeData(ids);
        }
    }else if(groupType.value == "项目"){
        if(col.length>0){
            checkDataProject.value = uniqueFunc([...checkDataProject.value,...col],'id');
        }else{
            let ids = tableData.value.map(value=>value.id);
            removeData(ids);
        }
    }else if(groupType.value == "产品"){
        if(col.length>0){
            checkDataProduct.value = uniqueFunc([...checkDataProduct.value,...col],'id');
        }else{
            let ids = tableData.value.map(value=>value.id);
            removeData(ids);
        }
    }

};
//移除未选中的数据
const removeData = (ids)=>{
    if(groupType.value == "疗程"){
        checkDataCure.value = checkDataCure.value.filter(value=>ids.indexOf(value.id) == -1);
    }else if(groupType.value == "套餐"){
        checkDataCombo.value = checkDataCombo.value.filter(value=>ids.indexOf(value.id) == -1);
    }else if(groupType.value == "项目"){
        checkDataProject.value = checkDataProject.value.filter(value=>ids.indexOf(value.id) == -1);
    }else if(groupType.value == "产品"){
        checkDataProduct.value = checkDataProduct.value.filter(value=>ids.indexOf(value.id) == -1);
    }
    
    
    
};
const toggleSelection = ()=>{
  //获取所有选中的id
  let ids = [];
  if(groupType.value == "疗程"){
    ids = checkDataCure.value.map(value=>value.id);
  }else if(groupType.value == "套餐"){
    ids = checkDataCombo.value.map(value=>value.id);
  }else if(groupType.value == "项目"){
    ids = checkDataProject.value.map(value=>value.id);
  }else if(groupType.value == "产品"){
    ids = checkDataProduct.value.map(value=>value.id);
  }
  //过滤获取相同值
  let repeatValue = tableData.value.filter(value=>ids.indexOf(value.id) != -1);
  seachTable.value.checkHaveData(repeatValue);
};

const cureTableConfig = ref([
    {
        prop: "code",
        label: "疗程编号"
    },
    {
        prop: "courseName",
        label: "疗程名称",
    },
    {
        prop: "retailPrice",
        label: "零售价",
    },
    {
        prop: "cureContent",
        label: "疗程内容",
        width:450,
        type:"slot",
        slotName:"cureContent"
    },

])
const comboTableConfig = ref([
    {
        prop: "code",
        label: "套餐编号",
        with:100
    },
    {
        prop: "comboName",
        label: "套餐名称",
    },
    {
        prop: "retailPrice",
        label: "零售价",
    },
    {
        prop: "comboContent",
        label: "套餐内容",
        width:450,
        type:"slot",
        slotName:"comboContent"
    },
    {
        prop: "salesClass",
        label: "销售分类",
    },
])
const projectTableConfig = ref([
    {
        prop: "code",
        label: "项目编号",
    },
    {
        prop: "projectName",
        label: "项目名称",
    },
    {
        prop: "retailPrice",
        label: "零售价",
    },
    {
        prop: "salesClass",
        label: "销售分类",
    },
])
const productTableConfig = ref([
    {
        prop: "code",
        label: "产品编号",
    },
    {
        prop: "productName",
        label: "产品名称",
    },
    {
        prop: "retailPrice",
        label: "零售价",
    },
    {
        prop: "salesClass",
        label: "销售分类",
    },
])

const _getBaseSetting = async ()=>{

    try{
        let result = await getBaseSetting();
        let classInfo =  getFieldValue('销售分类',result,'id');
        if(groupType.value !="疗程"){
            formInline.value[1].data = classInfo;
        }

        
    }catch(e){
        console.log(e,222);
    }
}

const openRange = (groupTypeInfo,cureList = [],comboList = [],projectList = [],productList = [],businessBrandId="")=>{
    businessBrandIdInfo.value = businessBrandId;
    groupType.value = groupTypeInfo;
    checkDataCure.value = cureList;
    checkDataCombo.value = comboList;
    checkDataProject.value = projectList;
    checkDataProduct.value = productList;
    nextTick(()=>{
        _getBaseSetting();
        rangeFlag.value = true;
    })
}
const groupTypeChange = (value)=>{
    _getBaseSetting();
}
const handlerSearch = async (formInline)=>{
    
    tableLoading.value = true;
    try{
        let apiInfo;
        if(groupType.value == "疗程"){
            apiInfo = getPageCourse;
        }else if(groupType.value == "套餐"){
            apiInfo = getPageCombo;
        }else if(groupType.value == "项目"){
            apiInfo = getProjectList;
        }else if(groupType.value == "产品"){
            apiInfo = getPageProducts;
        }
        let params = {
            ...formInline,
            businessBrandId:businessBrandIdInfo.value
        }
        const res = await apiInfo(params);
        totalPage.value = Number(res.total);
        tableData.value = res.records;
        nextTick(()=>{
            toggleSelection();
        })
        tableLoading.value = false;
    }catch(e){
        tableLoading.value = false;
    }
}
const confrimRange = ()=>{
    emits("backRangeValue",groupType.value,checkDataCure.value,checkDataCombo.value,checkDataProject.value,checkDataProduct.value);
    rangeFlag.value = false;
}
defineExpose({openRange})
</script>
<template>
    <el-dialog v-model="rangeFlag" title="活动范围" width="1000px">
        <div style="width:100%;height:500px" v-if="rangeFlag">
            <div style="width:100%;height:32px;padding-bottom:16px">
                <el-radio-group v-model="groupType" @change="groupTypeChange">
                    <el-radio-button v-for="item in groupTypeList" :key="item" :label="item" />
                </el-radio-group>
            </div>
            <div style="width:100%;height:calc(100% - 48px)" v-if="groupType == '疗程'">
                <SeachTable 
                    :tableType="1"
                    :tableSelection="true" 
                    ref="seachTable"
                    :forms="formInline"
                    :btnLefts="btnLefts"
                    :btnRights="btnRights"
                    :tableLoading="tableLoading"
                    :tableConfig="cureTableConfig"
                    :tableData="tableData"
                    :totalPage="totalPage"
                    @handlerSearch="handlerSearch"
                    :showLine="false"
                    :showBtn="false"
                    @selectHandle="selectHandle"
                    @selectAllHandle="selectAllChange"
                >
                    <template #cureContent="{ row }">
                        <div class="text-info" v-if="row.projectList.length>0">项目：
                            <span v-for="(item,key) in row.projectList" :key="key">
                                {{ item.commodityName || '-' }} {{ item.times?`* ${ item.times }`:`` }}
                                <span v-if="key>= (row.projectList.length-1)">；</span>
                                <span v-else>、</span>
                            </span>
                            
                        </div>
                        <div class="text-info" :style="{marginTop:row.projectList.length>0?'5px':'0px'}" v-if="row.productList.length>0">产品：
                            <span v-for="(item,key) in row.productList" :key="key">
                                {{ item.commodityName || '-' }}  {{ item.times?`* ${ item.times }`:`` }}
                                <span v-if="key>= (row.productList.length-1)">；</span>
                                <span v-else>、</span>
                            </span>
                        </div>
                    </template>
                </SeachTable>
            </div>
            <div style="width:100%;height:calc(100% - 48px)" v-if="groupType == '套餐'">
                <SeachTable 
                    :tableType="1"
                    :tableSelection="true" 
                    ref="seachTable"
                    :forms="formInline"
                    :btnLefts="btnLefts"
                    :btnRights="btnRights"
                    :tableLoading="tableLoading"
                    :tableConfig="comboTableConfig"
                    :tableData="tableData"
                    :totalPage="totalPage"
                    @handlerSearch="handlerSearch"
                    :showLine="false"
                    :showBtn="false"
                    @selectHandle="selectHandle"
                    @selectAllHandle="selectAllChange"
                >
                    <template #comboContent="{ row }">
                        <div class="text-info" v-if="row.projectList.length>0">项目：
                            <span v-for="(item,key) in row.projectList" :key="key">
                                {{ item.commodityName || '-' }} {{ item.times?`* ${ item.times }`:`` }}
                                <span v-if="key>= (row.projectList.length-1)">；</span>
                                <span v-else>、</span>
                            </span>
                            
                        </div>
                        <div class="text-info" :style="{marginTop:row.projectList.length>0?'5px':'0px'}" v-if="row.productList.length>0">产品：
                            <span v-for="(item,key) in row.productList" :key="key">
                                {{ item.commodityName || '-' }} {{ item.times?`* ${ item.times }`:`` }}
                                <span v-if="key>= (row.productList.length-1)">；</span>
                                <span v-else>、</span>
                            </span>
                        </div>
                    </template>
                </SeachTable>
            </div>
            <div style="width:100%;height:calc(100% - 48px)" v-if="groupType == '项目'">
                <SeachTable 
                    :tableType="1"
                    :tableSelection="true" 
                    ref="seachTable"
                    :forms="formInline"
                    :btnLefts="btnLefts"
                    :btnRights="btnRights"
                    :tableLoading="tableLoading"
                    :tableConfig="projectTableConfig"
                    :tableData="tableData"
                    :totalPage="totalPage"
                    @handlerSearch="handlerSearch"
                    :showLine="false"
                    :showBtn="false"
                    @selectHandle="selectHandle"
                    @selectAllHandle="selectAllChange"
                >
                </SeachTable>
            </div>
            <div style="width:100%;height:calc(100% - 48px)" v-if="groupType == '产品'">
                <SeachTable 
                    :tableType="1"
                    :tableSelection="true" 
                    ref="seachTable"
                    :forms="formInline"
                    :btnLefts="btnLefts"
                    :btnRights="btnRights"
                    :tableLoading="tableLoading"
                    :tableConfig="productTableConfig"
                    :tableData="tableData"
                    :totalPage="totalPage"
                    @handlerSearch="handlerSearch"
                    :showLine="false"
                    :showBtn="false"
                    @selectHandle="selectHandle"
                    @selectAllHandle="selectAllChange"
                >
                </SeachTable>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="rangeFlag = false">取消</el-button>
                <el-button type="primary" @click="confrimRange()">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style lang="less" scoped>
:deep(.search-line){
    padding:0;
}
:deep(.search-table .table){
    padding:0;
}
.text-info{
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    color: #222222;
}
:deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-left: 1px solid #3480FF;
}
:deep(.el-table__header){
    tr{
        th{
            &:last-child{
                .cell{
                    border-right: 0px;
                }
            }
        }
    }
}
</style>